import { Button, Input, Table, TableProps } from "antd"
import useRouter from "../../hooks/useRouter"
import { get_questions, QuestionProps, search_qa } from "../../api/flask";
import { useEffect, useState } from "react";

const Index = () => {
  const { navigate } = useRouter()
  const [data, setData] = useState<QuestionProps[]>([])
  const [value, setValue] = useState('')
  
  const columns: TableProps<QuestionProps>['columns'] = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'title',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: 'content',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'create_time',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: 'author',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title:'opt',
      dataIndex:'opt',
      render: (_, record) => {
        return (
          <div>
            <Button onClick={() => navigate(`/detail?id=${record.id}`)}>查看</Button>
          </div>
        )
      }
    }
  ];

  useEffect(() => {
    get_questions().then(res => {
      setData(res.data)
    })
  }, [])


  const handleGo = () => {
    navigate('/publish')
  }
  const search = () => {
    if (!value) return
    search_qa(value).then(res => {
      console.log(res.data)
    })
  }

  return (
    <div>
      <Button onClick={handleGo}>去发布</Button>

      <div>
        <Input value={value} onChange={e => setValue(e.target.value)}/>
        <Button onClick={search}>搜索</Button>
      </div>
      
      <Table<QuestionProps> columns={columns} dataSource={data} />

    </div>
  )
}

export default Index